<template>
	<div class="tab-item" @click="btnClick">
		<div v-if="!isAstv"><slot name="item-icon"></slot></div>
		<div v-else><slot name="item-select-icon"></slot></div>
		<div :class="{active:isAstv}"><slot name="item-text"></slot></div>
	</div>
</template>

<script>
	export default{
		props:{
			  path:String
		},
		data(){
			return{
				// isAstv:true,
			
			}
		
		},
		methods:{
			btnClick(){
				this.$router.push(this.path).catch(err=>err)
				// this.$router.push(this.path)
							
			}
		},
		computed:{
			isAstv(){
				return this.$route.path.indexOf(this.path) !==-1
			}
		}
	}
</script>

<style>
	.tab-item {
		text-align: center;
		flex: 1;
		height: 49px;
		font-size: 13px;
		color: #999999;
	}

	.tab-item img {
		width: 27px;
		height: 27px;
		vertical-align: middle;
	}
	.active{
		color: #000000;
		font-weight: bold;
	}
</style>
